<template>
  <el-container class="wrapper" direction="vertical">
    <div class="title-wrapper">
      <label class="tips">标题：</label>
      <el-input v-model="post.title">
        <!-- <label slot="prepend">请输入标题</label> -->
      </el-input>
    </div>
    <div class="markdown-container">
      <div class="container">
        <!-- <div class="title">编辑器</div> -->
        <mavon-editor
          v-model="post.content"
          ref="md"
          @save="save"
          @imgAdd="$imgAdd"
          @change="change"
          :externalLink="externalLink"
          style="min-height: 600px"
        />
        <el-button class="editor-btn" type="primary" @click="submit"
          >提交</el-button
        >
      </div>
    </div>
    <!-- <div class="settings">
      <h2>发文设置</h2>
      <div class="s-container">
        <div class="options">
          <el-radio v-model="op" :label="1">单图</el-radio>
          <el-radio v-model="op" :label="0">无封面</el-radio>
        </div>
        <el-upload v-if="op === 1"
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-input type="textarea " class="abstract"></el-input>
      </div>
    </div> -->
  </el-container>
</template>
  <script>
import axios from "axios";
import postApi from "@/axios/postApi";
export default {
  props: ["forumId"],
  data: function () {
    return {
      externalLink: {
        markdown_css: function () {
          // 这是你的markdown css文件路径
          return "/markdown/github-markdown.min.css";
        },
        hljs_js: function () {
          // 这是你的hljs文件路径
          return "/highlightjs/highlight.min.js";
        },
        hljs_css: function (css) {
          // 这是你的代码高亮配色文件路径
          return "/highlightjs/styles/" + css + ".min.css";
        },
        hljs_lang: function (lang) {
          // 这是你的代码高亮语言解析路径
          return "/highlightjs/languages/" + lang + ".min.js";
        },
        katex_css: function () {
          // 这是你的katex配色方案路径路径
          return "/katex/katex.min.css";
        },
        katex_js: function () {
          // 这是你的katex.js路径
          return "/katex/katex.min.js";
        },
      },
      post: {
        title: "",
        content: "",
        brief: "",
        forum: this.forumId,

      },
      html: "",
      configs: {},
      cover: "",
    };
  },
 
  methods: {
    save(value, render) {
      localStorage.setItem(
        "draft",
        JSON.stringify({ title: this.post.title, content: value })
      );
    },
    // 将图片上传到服务器，返回地址替换到md中
    $imgAdd(pos, $file) {
      var formdata = new FormData();
      formdata.append("file", $file);
      //将下面上传接口替换为你自己的服务器接口
      axios({
        url: "/upload/postImg",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" },
      }).then(({ data }) => {
        if ((data.code = this.$status.SUCCESS_CODE)) {
          if (!this.cover) {
            this.cover = data.data;
          }
          this.$refs.md.$img2Url(pos, data.data);
        }
      });
    },
    change(value, render) {
      // render 为 markdown 解析后的结果

      this.html = render;
      this.save(value, render);
    },
    submit() {
      const wrap = document.createElement("div");
      wrap.innerHTML = this.html;
      let str = "";
      wrap.querySelectorAll(":not(code,table *,table)").forEach((e) => {
        str += e.innerText;
      });
      this.post.brief = str.slice(0, 254);

      postApi.create(this.post).then(({ data }) => {
          this.$message.success("提交成功！");
          this.$router.push(  { name: 'post', params: { postId: p.postId } })
       
      })
    },
  },
  mounted() {
    const draftStr = localStorage.getItem("draft");
    if (draftStr) {
      const draft = JSON.parse(draftStr);
      this.post.title = draft.title;
      this.post.content = draft.content;
    }
  },
};
</script>
  <style lang="less">
.wrapper {
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}
.title-wrapper {
  display: flex;
  .tips {
    width: 60px;
    margin-right: 5px;
    line-height: 40px;
    color: #606266;
  }
}

.markdown-container {
  margin-top: 20px;
  .editor-btn {
    margin-top: 20px;
  }
  .title {
    padding-bottom: 30px;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
    color: #333;
    font-weight: 600;
  }
}
</style>
  
  